---
layout: default
title: Automagical Searching + Sorting
---

<h2>
<a name="searching-sorting" class="anchor" href="#searching-sorting"><span class="octicon octicon-link"></span></a>Automagical Searching + Sorting</h2>

<p>It is easy to add search input and sort buttons with just a few classes and attributes in your HTML. <em>&lsquo;Automagical&rsquo;</em> because List.js registers the event handlers, searches/sorts and updates the list for you:</p>

<h3>
<a name="searching-1" class="anchor" href="#searching-1"><span class="octicon octicon-link"></span></a>Searching</h3>

<ul>
  <li>
    <p>
    <strong><a name="class" href="#class" class="anchor"></a>class</strong>  <em class="docs-parameter-description">String. *required</em><br />
    The default class <code>search</code> is how List.js finds your writable search field. If you change it also set <a href="{{ "/api#searchClass" | relative_url }}">options.searchClass</a>.</p>
    <p>
    Alternatively, using <code>fuzzy-search</code> here will switch to the <a href='fuzzysearch.html'>Fuzzy Search</a> function.
    </p>
  </li>
  <li>
    <p>
    <strong><a name="type" href="#type" class="anchor"></a>type</strong> <em class="docs-parameter-description">String. *required</em><br />
    The default input type <code>search</code> is similar to using <code>text</code>, but web browsers may render it slightly differently: see <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#Differences_between_search_and_text_types'>https://developer.mozilla.org/.../input/search</a>. Either type will work with List.js.
    </p>
  </li>
</ul>

<pre><code>
&lt;input type="search" class="search" placeholder="normal search"&gt; or
&lt;input type="search" class="fuzzy-search" placeholder="fuzzy search!"&gt;
</code></pre>

<h3><a name="sorting-1" class="anchor" href="#sorting-1"><span class="octicon octicon-link"></span></a>Sorting</h3>

<ul>
  <li>
    <p><strong><a name="class2" href="#class2" class="anchor"></a>class</strong> <em class="docs-parameter-description">String. *required</em><br />
    The default class <code>sort</code> is how List.js finds clickable sort buttons. If you change it also set <a href="{{ "/api#sortClass" | relative_url }}">options.sortClass</a>.
    </p>
  </li>
  <li>
    <p>
      <strong><a name="data-sort" href="#data-sort" class="anchor"></a>data-sort</strong> <em class="docs-parameter-description">String. *required</em><br />
      This attribute on a clickable sort button should match the column name passed to List.js in <a href="{{ "/api#valueNames" | relative_url }}">options.valueNames</a>.
    </p>
  </li>
  <li>
    <p>
      <strong><a name="data-order" href="#data-order" class="anchor"></a>data-order</strong> <em class="docs-parameter-description">String</em><br>
      Set to <code>asc</code> or <code>desc</code> to enforce that sorting order for a column. The user won't be able to change the order, and any <code>data-default-order</code> attribute is ignored.
    </p>
  </li>
  <li>
    <p>
      <strong><a name="data-default-order" href="#data-default-order" class="anchor"></a>data-default-order</strong> <em class="docs-parameter-description">String, default: "asc"</em><br>
      Set to <code>desc</code> to change the initial sorting order for a column. Subsequent clicks will toggle the sorting order between ascending/descending, as usual.
  </p>
</li>
  <li>
    <p>
      <strong><a name="data-insensitive" href="#data-insensitive" class="anchor"></a>data-insensitive</strong> <em class="docs-parameter-description">Boolean, default: true</em><br>
      Set to <code>false</code> for case-sensitive sorting of that column.
    </p>
  </li>
</ul>

<pre><code>
Sort by: 
&lt;span class='sort' data-sort='name'&gt;Name&lt;/span&gt; or 
&lt;span class='sort' data-sort='born' data-default-order='desc'&gt;Born in Year&lt;/span&gt; or 
&lt;span class='sort' data-sort='city'&gt;City&lt;/span&gt;
</code></pre>

<p>The CSS classes <code>asc</code> and <code>desc</code> are added when a sort button is clicked on, so List.js can show which column is currently sorted. For example, using this CSS sets a yellow background with &#x2B06; or &#x2B07; added after the button text:</p>

<pre><code>
.sort.asc, .sort.desc {
  background-color: yellow;
  }
.sort.asc::after {
  content: "\002B06";
  padding-left: 3px;
  }
.sort.desc::after {
  content: "\002B07";
  padding-left: 3px
  }
</code></pre>
